<template>
  <div class="systemDrawings">
    <div class="file-manager">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in pathStack" :key="index" @click="handleBreadcrumbClick(index)">
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 文件展示区域 -->
      <div class="file-container">
        <div v-for="file in currentFiles" :key="file.id" class="file-item" @click="handleFileClick(file)">
          <div class="file-name">{{ file.name }}</div>
          <el-icon class="file-icon">
            <Folder v-if="file.isFolder" />
            <Document v-else />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Document, Folder } from '@element-plus/icons-vue'

interface FileItem {
  id: string
  name: string
  isFolder: boolean
  path: string
}

// 当前显示的文件列表
const currentFiles = ref<FileItem[]>([])
// 路径堆栈
const pathStack = ref<FileItem[]>([])

// 模拟API请求
const fetchFiles = async (path: string): Promise<FileItem[]> => {
  // 这里替换为实际API调用
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { id: '1', name: '电气系统', isFolder: true, path: '/docs' },
        { id: '2', name: '电讯系统', isFolder: true, path: '/docs' },
        { id: '3', name: '化水系统', isFolder: true, path: '/docs' },
        { id: '4', name: '烟气系统', isFolder: true, path: '/docs' },
        { id: '5', name: '热机系统', isFolder: true, path: '/docs' },
        { id: '6', name: '燃气系统', isFolder: true, path: '/docs' },
        { id: '7', name: '结构系统', isFolder: true, path: '/docs' },
        { id: '8', name: '给排水系统', isFolder: true, path: '/docs' },
        { id: '9', name: '自动化系统', isFolder: true, path: '/docs' },
        { id: '10', name: '建筑系统', isFolder: true, path: '/docs' },
        { id: '11', name: 'file1.txt', isFolder: false, path: '/file1.txt' }
      ])
    }, 500)
  })
}

// 初始化加载根目录
fetchFiles('/').then(files => {
  currentFiles.value = files
  pathStack.value = [{ id: 'root', name: '全部图纸', isFolder: true, path: '/' }]
})

// 处理文件点击
const handleFileClick = async (file: FileItem) => {
  if (!file.isFolder) return

  try {
    const newFiles = await fetchFiles(file.path)
    currentFiles.value = newFiles
    pathStack.value.push(file)
  } catch (error) {
    console.error('加载文件失败:', error)
  }
}

// 处理面包屑点击
const handleBreadcrumbClick = async (index: number) => {
  if (index === pathStack.value.length - 1) return

  const target = pathStack.value[index]
  try {
    const newFiles = await fetchFiles(target.path)
    currentFiles.value = newFiles
    pathStack.value = pathStack.value.slice(0, index + 1)
  } catch (error) {
    console.error('加载文件失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.systemDrawings {
  z-index: 998;
  height: 100vh;
  width: 100%;
  position: relative;
  background: #08334e;

  .file-manager {
    position: absolute;
    z-index: 999;
    left: vw(55);
    top: vh(99);
    padding: 20px 0 20px 20px;
    // min-width: 100%;
    width: 97%;
    margin: 0 auto;

    .breadcrumb {
      margin-bottom: 20px;
      cursor: pointer;
    }

    .file-container {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;


      .file-item {
        width: 200px;
        height: 200px;
        border: 1px solid #ebeef5;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        cursor: pointer;

        .file-icon {
          font-size: 60px;
          margin-bottom: 15px;
          color: #409eff;
        }

        .file-name {
          color: #00E3FF;
          text-align: center;
          font-size: vh(20);
          word-break: break-all;
          padding: 0 10px;
        }
      }

      .file-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
